<template>
  <!-- 商品评价页面 -->
  <div>
    <!-- 导航栏 -->
    <!-- 导航栏 -->
    <van-nav-bar
      style="height: 65px"
      title="全部评价"
      left-arrow
      @click-left="goStore" />

    <!-- 标签 -->
    <van-row>
      <van-col span="24">
        <van-button
          round
          type="info"
          size="small"
          color=" #f1f3f4"
          class="btn"
          @click="allscore()"
          ><span class="bspan">全部 {{ good.length }}</span></van-button
        >
        <van-button
          round
          type="info"
          size="small"
          color=" #f1f3f4"
          class="btn"
          @click="havingimage()"
          ><span class="bspan">有图</span></van-button
        >
        <van-button
          round
          type="info"
          size="small"
          color=" #f1f3f4"
          class="btn"
          @click="goodscore()"
          ><span class="bspan">好评</span></van-button
        >
        <van-button
          round
          type="info"
          size="small"
          color=" #f1f3f4"
          class="btn"
          @click="centercore()"
          ><span class="bspan">中评</span></van-button
        >
        <van-button
          round
          type="info"
          size="small"
          color=" #f1f3f4"
          class="btn"
          @click="chacore()"
          ><span class="bspan">差评</span></van-button
        >
      </van-col>
    </van-row>

    <!-- 分割线 -->
    <van-row style="width: 100%; height: 6px; background-color: #f1f3f4">
      <van-col span="24"></van-col>
    </van-row>

    <!-- 下拉刷新页面 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- <p>刷新次数: {{ count }}</p> -->

      <!-- 用户评价 -->
      <div style="padding: 10px 16px" v-for="item in good" :key="index">
        <van-row style="width: 100%; height: 45px">
          <van-col span="12">
            <!-- 头像 -->
            <van-image
              v-if="item.avatar == null"
              round
              width="10rem"
              height="10rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              style="width: 40px; height: 40px; float: left" />
            <van-image
              v-if="item.avatar != null"
              round
              width="10rem"
              height="10rem"
              :src="item.avatar"
              style="width: 40px; height: 40px; float: left" />
            <div style="margin-left: 55px">
              <!-- 用户名 -->
              <div
                style="text-align: left; color: gray"
                v-if="item.userName == null">
                匿名用户
              </div>
              <div
                style="text-align: left; color: gray"
                v-if="item.userName != null">
                {{ item.userName }}
              </div>
              <!-- 评级星星 -->
              <van-rate
                v-model="item.starlevel"
                :size="20"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee" />
            </div>
          </van-col>
          <!-- 评价时间 -->
          <van-col span="12" style="text-align: right; color: gray">
            {{ item.evaluatetime }}
          </van-col>
        </van-row>
        <van-row>
          <!-- 评价内容 -->
          <van-col span="24" style="text-align: left; margin: 10px 0px">{{
            item.evaluate
          }}</van-col>
        </van-row>
        <van-row>
          <van-col span="24" style="text-align: left; margin: 10px 0px"
            ><van-image
              width="100"
              height="100"
              :src="item.image"
              radius="8px"
          /></van-col>
        </van-row>
      </div>

      <!-- 底部 -->
      <van-row>
        <van-col span="24">&nbsp;</van-col>
      </van-row>
      <van-row>
        <van-col span="24">&nbsp;</van-col>
      </van-row>
      <van-row style="color: gray">
        <van-col span="24">---- 没有更多了 ----</van-col>
      </van-row>
      <van-row>
        <van-col span="24">&nbsp;</van-col>
      </van-row>
      <van-row>
        <van-col span="24">&nbsp;</van-col>
      </van-row>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
import { PullRefresh } from "vant";
import { all } from "axios";

Vue.use(PullRefresh);
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      value: 5, //星星点亮个数
      count: 0,
      isLoading: false,
      storeId: this.$route.query.storeId,
      // storeId: 1,
      score: 0,
      good: [],
      isimage: "",
    };
  },
  created: function () {
    this.queryStore();
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //  方法事件处理
    queryStore() {
      //查询门店
      var _this = this;
      console.log("。。。。。");
      this.$http
        .get(
          "/tbGoodsComment/queryStore?storeId=" +
            this.storeId +
            "&score=" +
            this.score +
            "&isimage=" +
            this.isimage
        )
        .then(function (response) {
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.good = response.data.data;
          }
        })
        .catch(function (error) {
          _this.$toast("获取商品评价信息时出错");
        });
    },
    //查看全部
    allscore() {
      this.score = 0;
      this.isimage = "";
      this.queryStore();
    },
    //好评
    goodscore() {
      this.score = 3;
      this.isimage = "";
      this.queryStore();
    },
    //中评
    centercore() {
      this.score = 2;
      this.isimage = "";
      this.queryStore();
    },
    //差评
    chacore() {
      this.score = 1;
      this.isimage = "";
      this.queryStore();
    },
    //有图
    havingimage() {
      this.score = 0;
      this.isimage = "1";
      this.queryStore();
    },
    //跳转商城页面
    goStore() {
      //  go(-1):返回上一级路由
      this.$router.go(-1);
    },

    //刷新评论
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style>
/* 按钮样式 */
.btn {
  margin: 20px 10px;
}

/* 按钮字体颜色样式 */
.bspan {
  color: #5f6368;
}
</style>
